গুগল চার্ট (Google Charts) ব্যবহার করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারেন, যেমন Bar Chart, Line Chart, এবং Pie Chart। এই চূড়ান্তভাবে ডেটাকে ভিজ্যুয়াল উপস্থাপন করতে সাহায্য করে। নিচে প্রতিটি চার্ট তৈরির বিস্তারিত উদাহরণ দেওয়া হলো।
১. Basic Bar Chart
Bar Chart সাধারণত তুলনা করতে ব্যবহৃত হয়। এটি একাধিক ক্যাটাগরির মধ্যে পরিমাণের তুলনা করার জন্য উপযুক্ত।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBarChart);
function drawBarChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
chartArea: {width: '50%'},
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'}
};
var chart = new google.visualization.BarChart(document.getElementById('bar_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Basic Bar Chart</h2>
<div id="bar_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এটি একটি Bar Chart তৈরি করবে যা বিভিন্ন শহরের জনসংখ্যার তুলনা করবে।
২. Basic Line Chart
Line Chart সময়ের সাথে ডেটার পরিবর্তন বা প্রবণতা প্রদর্শনের জন্য ব্যবহার করা হয়, যেমন সেলস, স্টক প্রাইস ইত্যাদি।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1170],
['2022', 660],
['2023', 1030]
]);
var options = {
title: 'Company Sales Over the Years',
hAxis: {title: 'Year'},
vAxis: {title: 'Sales (in USD)'},
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Basic Line Chart</h2>
<div id="line_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এই কোডটি একটি Line Chart তৈরি করবে যা একাধিক বছরের সেলস ডেটা প্রদর্শন করবে।
৩. Basic Pie Chart
Pie Chart একটি ভাগ বা অংশের আপেক্ষিক পরিমাণ প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারণত পণ্য বিক্রির ভাগ, বা ডিস্ট্রিবিউশন দেখানোর জন্য ব্যবহার করা হয়।
কোড উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'pie']});
google.charts.setOnLoadCallback(drawPieChart);
function drawPieChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Amount'],
['Food', 45],
['Rent', 25],
['Utilities', 15],
['Entertainment', 10],
['Others', 5]
]);
var options = {
title: 'Monthly Expenses Distribution',
is3D: true
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Basic Pie Chart</h2>
<div id="pie_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এটি একটি Pie Chart তৈরি করবে, যা মাসিক খরচের বিভিন্ন বিভাগের ভাগ প্রদর্শন করবে।
উপসংহার
এখন আপনি Bar Chart, Line Chart, এবং Pie Chart তৈরির জন্য গুগল চার্ট ব্যবহার করতে জানেন। এই উদাহরণগুলো অনুসরণ করে আপনি বিভিন্ন ধরনের চার্ট তৈরি করতে পারবেন এবং আপনার ডেটাকে আরও আকর্ষণীয়ভাবে উপস্থাপন করতে পারবেন। Google Charts একটি শক্তিশালী টুল যা ডেটার ভিজ্যুয়ালাইজেশন সহজ করে তোলে।
Read more
